<template>
	<!--pages/agent/myAgent/agentData.wxml-->
	<view class="page">
		<view class="" v-if="isTest" style="padding: 15px;">
			<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
					{{item.body}}
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="page" v-else>
			<view class="header">
				<Goodme-tabs class="TD-metab" v-model="tabIndex" :tabs="tabs" @change="swiperChange"></Goodme-tabs>
			</view>

			<view class="box">
				<view class="" :style="{height: height}">
					<mescroll-uni @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
						:up="upOption" @up="upCallback">

						<view class="mescroll-item" v-for="(item,index) in records">

							<view class="mescroll-item-title">
								<view class="item-title-left">
									<image :src="item.avatar" mode="widthFix" v-if="item.avatar"></image>
									<image src="/static/img/ic_load_fail.png" mode="widthFix" v-else></image>
									<view class="time">
										{{item.createDate}}
									</view>
								</view>
								<view class="">
									<text class="shareNum">{{item.shareNum}}</text>
									<text>人推广</text>
								</view>
							</view>
							<u-read-more text-indent="0" show-height="300" close-text="全部" :toggle="true">
								<text>{{item.characters}}</text>
							</u-read-more>
							<view class="mescroll-item-footer">
								<view class="mescroll-item-footer-left">
									<image class="configPic" :src="item.configPic" mode="widthFix"
										style="width: 300rpx;" v-if="item.configPic">
									</image>
									<image src="/static/img/ic_load_fail.png" mode="widthFix" v-else></image>
								</view>
								<view class="mescroll-item-footer-right" @click="toshare(item)">
									<image src="/static/img/share.png" mode="widthFix"></image>
									<view class="footer-right-text">
										去推广
									</view>
								</view>
							</view>
						</view>


					</mescroll-uni>
				</view>

			</view>

			<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" @tap="hideModal">
					<view class="bg-img">

						<!-- 自定义生成海报组件 -->
						<!-- @success：成功事件  imgSrc：图片地址（微信小程序必须白名单iP） QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
						<cc-poster ref="posterComponent" @success="posterSuccess" :imgSrc="goods.itempic"
							:QrSrc="erweimapath" :Title="goods.itemtitle" :PriceTxt="goods.itemendprice"
							:OriginalTxt="goods.itemprice" :Referrer="goods.Referrer" :ViewDetails="goods.ViewDetails"
							:LineType="false" :showLongPressSaveTip="false"></cc-poster>
					</view>
				</view>

			</view>
			<view class="code-box-img">
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="value" :options="options" size=200 sizeUnit="rpx"
					:auto="true" @complete="complete"></uqrcode>
			</view>
			<u-popup v-model="show" mode="center" width="95%">
				<view class="popup-box">
					<view class="popup-box-title">
						请选择要分享到的平台
					</view>
					<view class="popup-box-menu">
						<view class="menu-item" v-for="(item,index) in moduleList" @click="share(item)">
							<view>
								<image :src="item.configPic" mode="widthFix"></image>
							</view>
							<view>{{item.name}}</view>
						</view>
					</view>
					<view class="popup-box-button" @click="cancelShare">
						取消推广
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import number from "../../utils/number.js";

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				isTest: null,
				number: number, //声明number属性并赋值为引入的number模块
				user: {},
				height: "", // 需要固定swiper的高度
				tabs: [{

						dictLabel: "全部",


						dictValue: "0",

					},
					{

						dictLabel: "支付",


						dictValue: "1",

					},
					{

						dictLabel: "信用卡",


						dictValue: "2",

					},
					{

						dictLabel: "其他",


						dictValue: "3",

					}
				],
				// tabs: [{name:'直属',type:0}],
				tabIndex: 0, // 当前tab的下标
				downOption: {
					auto: true // false不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						// use: false,
						icon: "",
						tip: '~ 暂无数据 ~', // 提示
						btnText: ''
					}
				},
				records: [], //列表数据

				keyword: '',
				moduleList: [{
						name: '微信',
						type: 'WXSceneSession',
						configPic: '/static/img/ic_pay_wx.png',
						shareType: 2
					},
					{
						name: '微信朋友圈',
						type: 'WXSceneTimeline',
						configPic: '/static/img/wxpyq.png',
						shareType: 2
					}
				],
				show: false,
				shareForm: {},
				value: '',
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				// 二维码图片地址
				erweimapath: "",
				UserInfo: {},
				goods: {
					"CanvasID": '',
					"itemid": "2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw",
					"itemtitle": "",
					"itemshorttitle": "",
					"itemdesc": "【开丽旗舰店】安心裤型亲肤面料，产后专用不勒刀口，免穿设计方便，超强吸收加长加大款，产妇的优质选择！【赠运费险】",
					"itemprice": "",
					"todaysale": "3",
					"itempic": "https://img.xlblm.cn/dfdd95c7-e37e-4c33-a7ea-b5eb42a2c269.png",
					"itemendprice": "29.91",
					"Referrer": '推荐人',
					"ViewDetails": 'ViewDetails'

				},
				options: {
					margin: 10,
					foregroundImageSrc: '',
					// foregroundImageWidth:size / 4,
					// foregroundImageHeight:size / 4,
					// foreground: {
					// 	image: {
					// 		src: 
					// 		width: 0.25,
					// 		height: 0.25,
					// 		align: ['center', 'center'],
					// 		anchor: [0, 0]
					// 	}
					// }
				},
				itID: '',
				itemList: [{
						head: "赏识在于角度的转换",
						body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
						open: true,
						disabled: true
					}, {
						head: "生活中不是缺少美，而是缺少发现美的眼睛",
						body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
						open: false,
					}, {
						head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
						body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
						open: false,
					},

					{
						head: "真正的平静，不是避开车马喧嚣，而是在心中修篱种菊",
						body: "外界的嘈杂往往源于内心的浮躁，当我们学会沉淀思绪，即使身处闹市，也能找到内心的那片宁静之地",
						open: false,
					},
					{
						head: "每一个不曾起舞的日子，都是对生命的辜负",
						body: "生命是一场有限的旅程，与其平淡无奇地走过，不如勇敢地去尝试、去热爱、去创造属于自己的精彩瞬间",
						open: false,
					},
					{
						head: "人生就像一场马拉松，不在于瞬间的爆发，而在于途中的坚持",
						body: "很多时候，成功不是因为比他人更有天赋，而是因为比他人更能忍受痛苦，更能坚持到最后一步",
						open: false,
					},
					{
						head: "不要等待机会，而要创造机会",
						body: "被动地等待往往一无所获，主动出击，用智慧和汗水去开拓道路，机会才会在你的努力中悄然降临",
						open: false,
					},

				],
			}
		},
		onLoad() {

			// this.getUserInfo();
			// this.user = uni.getStorageSync('agentInfo')
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(114) + 'px'
			this.getUserInfo()
		},
		onShow() {
			this.isTest = uni.getStorageSync('isTest')
			if(this.isTest){
				uni.setNavigationBarTitle({
				       title:"文案"
				})
			}
			// console.log(this.isTest);
			this.getUserInfo()
		},
		methods: {
			async listOficialfx(itID) {
				const res = await util.request(
					api.listOficialfxUrl + '/' + this.shareForm.id, {

					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {

				} else {

				}
			},
			async getUserInfo() {
				const res = await util.request(
					api.getUserInfoUrl, {

					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.UserInfo = res.data
					this.craeterweimapath(res.data.user.inviteCode)
					// this.List = res.data
				}
			},
			share(e) {
				this.listOficialfx();
				uni.setClipboardData({
					data: this.shareForm.characters,
					success: () => {},
					fail: (err) => {
						uni.showToast({
							title: '文字复制失败',
							icon: 'fail'
						});
					}
				});
				// console.log(e);
				if (e.type == "WXSceneSession") {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: e.shareType,
						imageUrl: this.shareForm.imgIncludeCode,
						// imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							uni.setClipboardData({
								data: this.shareForm.characters,
								success: () => {},
								fail: (err) => {
									uni.showToast({
										title: '文字复制失败',
										icon: 'fail'
									});
								}
							});
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.share({
						provider: "weixin",
						scene: e.type,
						type: e.shareType,
						// href: this.shareForm.configPic,
						summary: this.shareForm.characters,
						imageUrl: this.shareForm.imgIncludeCode,
						success: (res) => {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				this.show = false
			},
			toshare(e) {
				// console.log(e);
				// this.show = true
				this.shareForm = e
				// e.imgUrl = e.configPic
				this.getUserInfo()
				this.creadModel(e)
			},
			craeterweimapath(e) {
				this.value = api.appRegisterUrl + e
				// console.log(this.value );
			},
			posterSuccess(haibaoImg) {
				// console.log(haibaoImg);
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
				this.$set(this.shareForm, 'imgIncludeCode', haibaoImg.tempFilePath)
				this.show = true
				this.modalName = '';
			},
			cancelShare() {
				this.show = false
				this.modalName = '';
			},
			complete(e) {
				// console.log(e);
				if (e.success) {
					// console.log('生成成功');
					this.sucess = e.success
					this.isshows = false
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							// console.log(res);
							this.erweimapath = res.tempFilePath
						},
						fail: err => {
							console.log(err)
							uni.showToast({
								title: '图片生成失败',
								duration: 2000,
								icon: 'none'
							})
						}
					});
				} else {
					console.log('生成失败');
					uni.showToast({
						title: '',
						duration: 2000,
						icon: 'none'
					})
				}

			},
			creadModel(item) {
				// this.goods.itemid = item.id;
				// this.goods.itemtitle = '';
				this.goods.itempic = item.configPic;
				this.goods.Referrer = this.UserInfo.user.userName + "  " + this.UserInfo.user.phone;
				this.goods.ViewDetails = "邀请码：" + this.UserInfo.user.inviteCode;

				if (!this.haibaoImg) {
					this.haibaoShow = true;
					uni.showLoading({
						title: '海报生成中...',
						mask: true
					});

				} else {
					if (this.$refs.posterComponent) {
						this.goods.itempic = item.configPic;
						// 调用组件的方法，例如 `someMethod`
						this.$refs.posterComponent.chongxie();
					} else {}
				}
				this.haibaoShow = true;
				uni.showLoading({
					title: '海报生成中...',
					mask: true
				});
			},
			hideModal() {
				this.modalName = '';
			},
			// 轮播菜单
			swiperChange(e) {
				// this.tabIndex = e.detail.current
				// console.log(this.tabIndex );
				this.records = []
				this.mescroll.resetUpScroll() // 再刷新列表数据
				// this.mescroll.resetUpScroll()
			},

			search() {
				this.downCallback();
			},


			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
				this.getUserInfo()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {


				this.keyword = this.tabs[this.tabIndex].dictValue

				let keyword = this.tabs[this.tabIndex].dictValue
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				const res = util.request(
					api.listOficialUrl + '/' + this.keyword, {

					},
					'POST'
				).then(res => {
					// console.log(res);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					// let totalPage = res.data.pages;
					// this.mescroll.endByPage(res.data.records.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					this.mescroll.endSuccess(res.data.length);
					//设置列表数据
					if (page.num == 1) this.records = []; //如果是第一页需手动制空列表
					this.records = this.records.concat(res.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			}

		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: white;
		/* padding-bottom: 50rpx; */
	}

	.mescroll-upwarp {
		min-height: 0rpx !important;
	}
</style>

<style lang="scss">
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}

	.code-box-img {
		position: absolute;
		left: -100%;
	}
</style>
<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	.header {
		background-color: #F5F5F5;
		padding: 5px;
	}

	.mescroll-item {
		background-color: #fff;
		// width: 100%;
		// margin: 5px 0;
		margin: 5px 15px 0px 15px;
		padding: 10px;
		border-radius: 10px;
	}

	.mescroll-item-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
	}

	.item-title-left {
		display: flex;
		align-items: center;

		image {
			width: 40px;
			height: 40px;
		}
	}

	.time {
		color: #CBCBCB;
		margin-left: 10px;
	}

	.shareNum {
		font-size: 18px;
		font-weight: 600;
	}

	.mescroll-item-footer {
		display: flex;
		align-items: baseline;
		justify-content: space-between;

		.configPic {
			width: 100%;
			// height: 363px;
		}
	}

	.mescroll-item-footer-left {
		flex: 1;
	}

	.mescroll-item-footer-right {
		display: flex;
		align-items: center;

		image {
			width: 30px;

		}
	}

	.footer-right-text {
		color: #0780F6;

	}

	.popup-box {
		width: 100%;
		background-color: #E9EFF2;
	}

	.popup-box-title {
		text-align: center;
		color: #575A5C;
		height: 45px;
		line-height: 45px;
	}

	.popup-box-menu {
		margin-top: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.menu-item {
		flex: 1;

		image {
			width: 40px;
			height: 85rpx;
		}

	}

	.menu-item>view {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 26rpx;
		padding: 6rpx 0;
	}

	.popup-box-button {
		background-color: #FFFFFF;
		text-align: center;
		color: #575A5C;
		height: 45px;
		line-height: 45px;
	}
</style>